<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, minimum-scale=1, initial-scale=1.0, maximum-scale=1, user-scalable=no" charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="/pc/css/media.css"/>
    <link rel="stylesheet" type="text/css" href="/pc/css/common.css"/>

    <title>对象存储</title>
    <link href="/pc/css/mui.picker.css" rel="stylesheet" />
    <link href="/pc/css/mui.poppicker.css" rel="stylesheet" />
    <link rel="stylesheet" type="text/css" href="/pc/css/index.css"/>
    <script src="//do.yunzhijia.com/pub/js/qingjs.js"></script>
    <link href="//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="//cdn.bootcss.com/bootstrap-slider/9.4.1/css/bootstrap-slider.css" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="/pc/css/index.css"/>
    <script src="/pc/js/jquery-3.0.0.min.js"></script>
    <script src="/layer/layer.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap-slider/9.4.1/bootstrap-slider.min.js"></script>

</head>
<body style="background: #eaeff3;>
<div class="main_div">
<div class="main_body">

    <p class="topTip_p">客户经理折扣为6折。</p>
    <div class="listing">
        <div class="items">
            <div class="item">
                <div class="iconDiv"><i>
                    <img src="/pc/image/store.png" width="20px"; height="25px">
                </i></div>
                <h4 class="title">对象存储</h4>
                <ul class="config2_ul" id="list">
                    <li>
                        <div class="_config_div left add" id="showVpnPicker">
                            <span class="left">存储空间</span>
                            <i class="right">
                                <img src="/pc/image/go_right.png">
                            </i>
                        </div>
                        <div class="_config_div wid35 left zhuiRou net_kd" style="width: 45% !important;">
                            <div class="stat_minus minus1 jian1">
                                <i>
                                    <img src="/pc/image/Group_MINUS.png" style=" height: 26px;"/>
                                </i>
                            </div>
                            <input type="tel" pattern="[0-9]*" maxlength="4" id="statnum" class="stat_num input_bg1 zhou input_text1" value="1">
                            <div class="stat_plus plus1  add1">
                                <i>
                                    <img src="/pc/image/Group_PLUS.png" style=" height: 26px;"/>
                                </i>
                            </div>
                        </div>
                    </li>
                </ul>

                <ul class="config2_ul" id="list">
                    <li>
                        <div class="_config_div left add" id="showVpnPicker">
                            <span class="left">流入流量</span>
                            <i class="right">
                                <img src="/pc/image/go_right.png">
                            </i>
                        </div>
                        <div class="_config_div wid35 left zhuiRou net_kd" style="width: 45% !important;">
                            <div class="stat_minus minus1 jian2">
                                <i>
                                    <img src="/pc/image/Group_MINUS.png" style=" height: 26px;"/>
                                </i>
                            </div>
                            <input type="tel" pattern="[0-9]*" maxlength="4" id="statnum" class="stat_num input_bg1 zhou input_text2" value="1">
                            <div class="stat_plus plus1 add2">
                                <i>
                                    <img src="/pc/image/Group_PLUS.png" style=" height: 26px;"/>
                                </i>
                            </div>
                        </div>
                    </li>
                </ul>

                <ul class="config2_ul" id="list">
                    <li>
                        <div class="_config_div left add" id="showVpnPicker">
                            <span class="left">流出流量</span>
                            <i class="right">
                                <img src="/pc/image/go_right.png">
                            </i>
                        </div>
                        <div class="_config_div wid35 left zhuiRou net_kd" style="width: 45% !important;">
                            <div class="stat_minus minus1 jian3">
                                <i>
                                    <img src="/pc/image/Group_MINUS.png" style=" height: 26px;"/>
                                </i>
                            </div>
                            <input type="tel" pattern="[0-9]*" maxlength="4" id="statnum" class="stat_num input_bg1 zhou input_text3" value="1">
                            <div class="stat_plus plus1 add3">
                                <i>
                                    <img src="/pc/image/Group_PLUS.png" style=" height: 26px;"/>
                                </i>
                            </div>
                        </div>
                    </li>
                </ul>

                <ul class="config2_ul" id="list">
                    <li>
                        <div class="_config_div left add" id="showVpnPicker">
                            <span class="left">请求次数</span>
                            <i class="right">
                                <img src="/pc/image/go_right.png">
                            </i>
                        </div>
                        <div class="_config_div wid35 left zhuiRou net_kd" style="width: 45% !important;">
                            <div class="stat_minus minus1 jian4">
                                <i>
                                    <img src="/pc/image/Group_MINUS.png" style=" height: 26px;"/>
                                </i>
                            </div>
                            <input type="tel" pattern="[0-9]*" maxlength="4" id="statnum" class="stat_num input_bg1 zhou input_text4" value="1">
                            <div class="stat_plus plus1 add4">
                                <i>
                                    <img src="/pc/image/Group_PLUS.png" style=" height: 26px;"/>
                                </i>
                            </div>
                        </div>
                    </li>
                </ul>

            </div>




            <div class="summary_div">
                <ul class="configInfo_ul left">
                    <li>存储空间:<span id = "cunChuZone" value="1">1</span>GB</li>
                    <li>流入流量:<span id = "free" value="1">免费</span></li>
                    <li>流出流量:<span id = "liuLiang" value="1">1</span>GB</li>
                    <li>请求次数:<span id="countTimes" value="1">1</span>万次</li>
                </ul>
                <p class="price_p right " id="cpu_price" style="margin-top: -4px;">￥0.81</p>
            </div>
        </div>
    </div>
</div>
<#include "foot.ftl">
<#--//九个计算值
        //CPU-->
<#--<input type="hidden" id="valueOfAli" name="valueOfAli" value="580">
<input type="hidden" id="samplePrice" name="samplePrice" value="999">-->


<#--定义四个值-->
<input type="hidden" id="allPrice1" name="allPrice1" value="0.25">
<input type="hidden" id="allPrice2" name="allPrice2" value="0.55">
<input type="hidden" id="allPrice3" name="allPrice3" value="0.01">

<input type="hidden" id="txPrice1" name="txPrice1" value="0">
<input type="hidden" id="txPrice2" name="txPrice2" value="0">
<input type="hidden" id="txPrice3" name="txPrice3" value="0">

<input type="hidden" id="aliPrice1" name="aliPrice1" value="0">
<input type="hidden" id="aliPrice2" name="aliPrice2" value="0">
<input type="hidden" id="aliPrice3" name="aliPrice3" value="0">


<#--//带宽-->
<input hidden id="price_two" name="price_two" value="0">
<input type="hidden" id="tx_sata_tag" name="tx_sata_tag" value="0">

<input type="hidden" name="flag" id="flag" value="0">
<input type="hidden" name="flagNum" id="flagNum" value="0">
<input type="hidden" name="flag_die" id="flag_die" value="1">
<input type="hidden" name="flag_die_flag" id="flag_die_flag" value="1">
<input type="hidden" name="title" id="title" value="${title}">
<input type="hidden" name="openId" id="openId" value="${openId}">
</div>
<script src="/pc/js/mui.min.js"></script>
<script src="/pc/js/mui.poppicker.js"></script>
<script src="/pc/js/mui.picker.min.js"></script>
<script src="/pc/js/yun_title.js"></script>
<script>

    $("#ali_price").text("￥0.31");
    $("#tx_price").text("￥0.00");
    $("#allprice").text("￥0.81");
    $('.jian1').click(function () {
        var numInput = $(this).next();
        var num=parseInt(numInput.val());
        if(num<=1){
            numInput.val(1);
            $("#cunChuZone").text(1);
            count1(1);
        }
        else {
            num=num-1;
            numInput.val(num);
            $("#cunChuZone").text(num);
            count1(num);
        }
    });
    $('.add1').click(function () {
        var numInput = $(this).prev();
        var  num=parseInt(numInput.val());
        num=num+1;
        numInput.val(num);
        $("#cunChuZone").text(num);
        count1(num);
    });
    $('.input_text1').on("blur",function () {
        var num = parseInt($(this).val());
        if(isNaN(num)){
            num=0;

        }
        if(num<=0||num==""){
            $(this).val(1);
            //$('.stat_num')
            $("#cunChuZone").text(num);
            count1(num);
        }
        /*else if(num>=2000){
            $(this).val(2000);
            /!*$("#vpnData").text(num);*!/
            count(num);
        }*/
        else {
            $(this).val(num);
            $("#cunChuZone").text(num);
            count1(num);
        }
    });


    $('.jian2').click(function () {
        var numInput = $(this).next();
        var num=parseInt(numInput.val());
        if(num<=1){
            numInput.val(1);

        }
        else {
            num=num-1;
            numInput.val(num);

        }
    });
    $('.add2').click(function () {
        var numInput = $(this).prev();
        var  num=parseInt(numInput.val());
        num=num+1;
        numInput.val(num);

    });
    $('.input_text2').on("blur",function () {
        var num = parseInt($(this).val());
        if(isNaN(num)){
            num=0;

        }
        if(num<=0||num==""){
            $(this).val(1);
            //$('.stat_num')

        }

        else {
            $(this).val(num);

        }
    });

    $('.jian4').click(function () {
        var numInput = $(this).next();
        var num=parseInt(numInput.val());
        if(num<=1){
            numInput.val(1);
            $("#countTimes").text(1);
            count4(1);
        }
        else {
            num=num-1;
            numInput.val(num);
            $("#countTimes").text(num);
            count4(num);
        }
    });
    $('.add4').click(function () {
        var numInput = $(this).prev();
        var  num=parseInt(numInput.val());
        num=num+1;
        numInput.val(num);
        $("#countTimes").text(num);
        count4(num);
        /*if(num>=2000){
            numInput.val(2000);
            /!* $("#vpnData").text(num);*!/
            count(num);
        }
        else {
            num=num+1;
            numInput.val(num);
            /!*$("#vpnData").text(num);*!/
            count(num);
        }*/
    });
    $('.input_text4').on("blur",function () {
        var num = parseInt($(this).val());
        if(isNaN(num)){
            num=0;

        }
        if(num<=0||num==""){
            $(this).val(1);
            //$('.stat_num')
            $("#countTimes").text(1);
            count4(num);
        }
        /*else if(num>=2000){
            $(this).val(2000);
            /!*$("#vpnData").text(num);*!/
            count(num);
        }*/
        else {
            $(this).val(num);
            $("#countTimes").text(num);
            count4(num);
        }
    });





    $('.jian3').click(function () {
        var numInput = $(this).next();
        var num=parseInt(numInput.val());
        if(num<=1){
            numInput.val(1);
            $("#liuLiang").text(1);
            count3(1);
        }
        else {
            num=num-1;
            numInput.val(num);
            $("#liuLiang").text(num);
            count3(num);
        }
    });
    $('.add3').click(function () {
        var numInput = $(this).prev();
        var  num=parseInt(numInput.val());
        num=num+1;
        numInput.val(num);
        $("#liuLiang").text(num);
        count3(num);

    });
    $('.input_text3').on("blur",function () {
        var num = parseInt($(this).val());
        if(isNaN(num)){
            num=0;

        }
        if(num<=0||num==""){
            $(this).val(1);
            //$('.stat_num')
            $("#liuLiang").text(num);
            count3(num);
        }
        /*else if(num>=2000){
            $(this).val(2000);
            /!*$("#vpnData").text(num);*!/
            count(num);
        }*/
        else {
            $(this).val(num);
            $("#liuLiang").text(num);
            count3(num);
        }
    });

    function count1(num) {
        var allPrice1 = document.getElementById('allPrice1');
        allPrice1.value=parseFloat(num*0.25);

        var txPrice1 = document.getElementById('txPrice1');
        if(num<50){
            txPrice1.value=0;
        }
       else{
            txPrice1.value=parseFloat((num-50)*0.13);
        }

        var aliPrice1 = document.getElementById('aliPrice1');
        aliPrice1.value=parseFloat(num*0.148);
        getAllPrice();
    }

    function count3(num) {
        var allPrice2 = document.getElementById('allPrice2');
        allPrice2.value=parseFloat(num*0.55);

        var txPrice2 = document.getElementById('txPrice2');
        if(num<10){
            txPrice2.value=0;
        }
        else{
            txPrice2.value=parseFloat((num-10)*0.01);
        }

        var aliPrice2 = document.getElementById('aliPrice2');
        aliPrice2.value=parseFloat(num*0.15);
        getAllPrice();
    }

    function count4(num) {
        var allPrice3 = document.getElementById('allPrice3');
        allPrice3.value=parseFloat(num*0.01);

        var txPrice3 = document.getElementById('txPrice3');
        if(num<10){
            txPrice3.value=0;
        }
        else{
            txPrice3.value=parseFloat((num-10)*0.01);
        }

        var aliPrice3 = document.getElementById('aliPrice3');
        aliPrice3.value=parseFloat(num*0.01);
        getAllPrice();
    }


    function getAllPrice() {
        var allPrice1=parseFloat(document.getElementById('allPrice1').value);
        var txPrice1=parseFloat(document.getElementById('txPrice1').value);
        var aliPrice1=parseFloat(document.getElementById('aliPrice1').value);


        var allPrice2=parseFloat(document.getElementById('allPrice2').value);
        var txPrice2=parseFloat(document.getElementById('txPrice2').value);
        var aliPrice2=parseFloat(document.getElementById('aliPrice2').value);


        var allPrice3=parseFloat(document.getElementById('allPrice3').value);
        var txPrice3=parseFloat(document.getElementById('txPrice3').value);
        var aliPrice3=parseFloat(document.getElementById('aliPrice3').value);

        $("#allprice").text("￥"+(allPrice1+allPrice2+allPrice3).toFixed(2));
        $("#tx_price").text("￥"+(txPrice1+txPrice2+txPrice3).toFixed(2));
        $("#ali_price").text("￥"+(aliPrice1+aliPrice2+aliPrice3).toFixed(2));
        $("#cpu_price").text("￥"+(allPrice1+allPrice2+allPrice3).toFixed(2));

        /*allPrice1

        txPrice1

        aliPrice1*/

    }
    $('.checkInfo_right').click(function () {
        var openId=$('#openId').val();
        //VCPU
        var shiLiPz=$('#cunChuZone').text()+"GB";
        var shouQuanNum=$('#liuLiang').text()+"GB";
        var shiJian=$('#countTimes').text()+"万次";


        //三个价格
        var aliprice=$('#ali_price').text();
        var txprice=$('#tx_price').text();
        var allprice=$('#allprice').text();
        if(aliprice=="无此规格"){
            aliprice=0;
        }
        else {
            aliprice=aliprice.substring(1);
        }
        if(txprice=="无此规格"){
            txprice=0;
        }
        else {
            txprice=txprice.substring(1);
        }
        allprice=allprice.substring(1);

        var data1 = {
            cpuAndMem:shiLiPz,
            meMory:'',
            stat:shouQuanNum,
            brandNum:shiJian,

            ali_price:aliprice,
            tx_price:txprice,
            all_price:allprice,
            productTypeId:10,//对象存储
            productName:'对象存储',
            oneKey:'存储空间',
            twoKey:'流出流量',
            threeKey:'请求次数',
            disCount:'1',
            oneImage:'list_icon1',
            twoImage:'list_icon4',
            threeImage:'list_icon9'
        }
        $.post("/takeList/"+openId+"/",data1,function(data){
            if(data.type=="success"){
                layer.msg(data.msg);
            }
        });
    });



</script>


</body>

</html>
